html {
--tdk-color-gray: #5F5F5F;
--tdk-color-blue: #0046ad;
--tdk-color-blue-light: #9aafcb;
--tdk-color-blue-dark: #334069;
--tdk-color-yellow: #f4d35c;
--tdk-color-orange: #e87800;
--tdk-color-red: #a21636;
--tdk-color-purple: #682a6c;
--tdk-color-green: #45ac92;
--tdk-color-green-light: #a8dde3;
--tdk-color-green-dark: #03505c;
}
.guide {
--cols: 2;
--rows: 4;
--bg1: color-mix(in srgb, var(--tdk-color-gray) 5%, white);
--bg2: color-mix(in srgb, var(--tdk-color-gray) 0%, white);
--bg2: white;
--row-height: 50px;
background: repeating-linear-gradient(var(--bg1), var(--bg1) var(--row-height), var(--bg2) var(--row-height), var(--bg2) calc(var(--row-height) * 2));
background: repeating-linear-gradient(var(--bg1), var(--bg1) calc(var(--row-height) - 2px), var(--bg2) calc(var(--row-height) - 2px), var(--bg2) var(--row-height));
}
@media (max-width: 768px) {
.guide {
overflow-y: hidden;
overflow-x: scroll;
}
}
.guide .inner {
min-height: calc(var(--rows) * var(--row-height));
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
grid-template-rows: repeat(2, var(--row-height)) 1fr;
grid-gap: 0px;
}
.guide .inner>h4 {
color: white;
background-color: color-mix(in srgb, var(--tdk-color-blue) 60%, white);
border: 2px solid white;
margin: -1px;
display: flex;
align-items: center;
justify-content: center;
}
.guide .inner>h4:nth-of-type(1) {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.guide .inner>h4:nth-of-type(2) {
grid-column: 2 / -1;
grid-row: 1 / 2;
}
.guide .column {
grid-row: 2 / 4;
position: relative;
min-width: 160px;
border: 2px solid white;
margin: -1px;
}
.guide .column>div {
min-height: var(--row-height);
display: flex;
align-items: center;
justify-content: center;
}
.guide .column.axis {
grid-column: 1 / 2;
grid-row: 3 / 4;
/* grid-row: 3 / -1; */
display: flex;
flex-direction: column;
}
.guide .column.axis .base {
flex: 0 1 var(--row-height);
}
.guide .column.axis .arrow {
position: relative !important;
top: unset !important;
left: unset !important;
flex: 1 1 auto;
flex: 1;
--arrow-size: 3rem;
}
.guide .column.axis .arrow::before {
content: '';
position: absolute;
left: 50%;
z-index: 0;
transform: translateX(-50%);
width: var(--arrow-size);
background: var(--tdk-color-blue-dark);
}
.guide .column.axis .arrow::after {
content: '';
position: absolute;
left: 50%;
z-index: 0;
transform: translateX(-50%);
border: calc(var(--arrow-size) * .8) solid transparent;
}
.guide .column.axis .arrow.up::before {
top: 3rem;
bottom: 1rem;
}
.guide .column.axis .arrow.up::after {
top: 1rem;
border-top-width: 0;
border-bottom-color: var(--tdk-color-blue-dark);
}
.guide .column.axis .arrow.down::before {
top: 1rem;
bottom: 3rem;
}
.guide .column.axis .arrow.down::after {
bottom: 1rem;
border-bottom-width: 0;
border-top-color: var(--tdk-color-blue-dark);
}
.guide .column.axis .arrow span {
transform: rotate(-90deg);
position: relative;
z-index: 1;
color: white;
font-size: 1.5rem;
}
.guide .column.axis .arrow span.detail {
transform: rotate(-90deg) translateY(var(--arrow-size));
position: absolute;
color: inherit;
}
.guide .column h4 {
min-height: var(--row-height);
color: white;
background-color: color-mix(in srgb, var(--tdk-color-blue) 40%, white);
border-bottom: 2px solid white;
margin-bottom: -1px;
display: flex;
align-items: center;
justify-content: center;
}
.guide .series {
--pos-top: 0;
position: relative;
display: block;
display: flex;
min-height: var(--row-height);
background-color: color-mix(in srgb, var(--tdk-color-gray) 20%, white);
padding: 0.5rem;
margin: 4px;
margin-top: calc(var(--row-height) * var(--pos-top) + 4px);
}
.guide .series[href] {
background-color: color-mix(in srgb, var(--tdk-color-blue) 15%, white);
}
.guide .series[href]:hover {
text-decoration: none;
background-color: color-mix(in srgb, var(--tdk-color-blue) 20%, white);
}
.guide .series::after {
content: '';
position: absolute;
top: 0;
right: 0;
font-size: 0.8em;
padding: 0 0.5rem;
}
.guide .series.new::after {
content: 'New';
background-color: var(--tdk-color-yellow);
}
.guide .series.planned::after {
content: 'Planned';
color: #fff;
background-color: var(--tdk-color-green);
}
.guide .series p {
margin: 0;
flex: 1 0 auto;
}
.guide .series figure {
margin: 0;
flex: 0 1 25%;
}
@media (max-width: 552px) {
.guide .series figure {
display: none;
}
}
.guide .series figure img {
max-width: 100%;
}
html[lang="de"] .guide .series.new::after {
content: 'Neu';
}
html[lang="de"] .guide .series.planned::after {
content: 'Geplant';
}
html[lang="ja"] .guide .series.new::after {
content: '新しい';
}
html[lang="ja"] .guide .series.planned::after {
content: '予定';
}
html[lang="zh"] .guide .series.new::after {
content: '新';
}
html[lang="zh"] .guide .series.planned::after {
content: '计划';
}